import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/login/text_field.dart';
import 'package:flutter_eve_plugin/constants/constant.dart';
import 'package:flutter_eve_plugin/constants/icon_font.dart';
import 'package:flutter_eve_plugin/model/base_res.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/login/captcha.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/login/actions.dart';
import 'package:flutter_eve_plugin/plugin/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/login/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:flutter_eve_plugin/utils/toast_util.dart';

class LoginCodeWidget extends StatefulWidget {
  @override
  _LoginCodeWidgetState createState() => _LoginCodeWidgetState();
}

class _LoginCodeWidgetState extends State<LoginCodeWidget> {
  Timer _timer;
  int _countDownTime = 0;
  bool _onTap = false;

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
        converter: (store) => AppStateViewModel(
            state: store.state,
            yeXiuStateViewModel: YeXiuStateViewModel(
                loginStateViewModel: LoginStateViewModel(onCode: (code) {
              store.dispatch(inputCode(store, code));
            }))),
        builder: (context, vm) {
          return Container(
            margin: EdgeInsets.only(left: setRatio(29), right: setRatio(29)),
            decoration: ShapeDecoration(
                shape: UnderlineInputBorder(
                    borderSide: BorderSide(
                        color: Color(0xFFE5E5E5),
                        style: BorderStyle.solid,
                        width: setRatio(1)))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: setRatio(180),
                  child: ITextField(
                    inputText: vm.state.yeXiuState.loginState.code,
                    deleteIcon: Icon(
                      IconFont.CLEAR,
                      size: setRatio(18),
                      color: Color(0xFFCCCCCC),
                    ),
                    inputBorder: InputBorder.none,
                    keyboardType: ITextInputType.number,
                    hintText: '请输入验证码',
                    hintStyle: TextStyle(
                        color: Color(0xFFC2C2C2), fontSize: setTextSp(14)),
                    textStyle: TextStyle(
                        color: Color(0xFF333333), fontSize: setTextSp(14)),
                    fieldCallBack:
                        vm.yeXiuStateViewModel.loginStateViewModel.onCode,
                  ),
                ),
                FlatButton(
                  onPressed: () {
                    //校验输入
                    if (vm.state.yeXiuState.loginState.phone.length > 0 &&
                        _countDownTime == 0 &&
                        !_onTap) {
                      reqCode(vm.state.yeXiuState.loginState.phone,
                          vm.state.yeXiuState.loginState.areaCode, '1');
                    }
                  },
                  child: Text(
                    _countDownTime > 0 ? '${_countDownTime}s后重新发送' : '获取验证码',
                    style: TextStyle(
                        color: Color(0xFFB3B3B3), fontSize: setTextSp(14)),
                  ),
                )
              ],
            ),
          );
        });
  }

  reqCode(String mobile, String areaCode, String type) {
    _onTap = true;
    var req = CaptchaReq(mobile, areaCode, type);
    PluginEve.sendMessage(PluginConstant.httpYXCaptcha,
            param: req, httpType: HttpType.POST)
        .then((data) {
      _onTap = false;
      BaseRes res = data;
      if (res.code == 0) {
        Toast.show(context, '验证码发送成功');
        setState(() {
          _countDownTime = 60;
        });
        //开始倒计时
        startCountdownTimer();
      } else {
        Toast.show(context, '验证码发送失败');
      }
    });
  }

  void startCountdownTimer() {
    const oneSec = const Duration(seconds: 1);

    var callback = (timer) => setState(() {
          if (_countDownTime < 1) {
            _timer.cancel();
          } else {
            _countDownTime = _countDownTime - 1;
          }
        });

    _timer = Timer.periodic(oneSec, callback);
  }

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      _timer.cancel();
    }
  }
}
